<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>超市账单管理系统</title>
  <link type="text/css" rel="stylesheet" href="css/style.css"/>
  <link rel="icon" href="">
</head>
<div id="header">
  <div class="title"></div>
  <div class="welcome">欢迎您：<span id="welcome-user-name"></span></div>
</div>
<div id="section-left">
  <ul class="left-menu">
    <li><a href="bill.html" target="mainFrame"><img src="images/btn_bill.gif"/></a></li>
    <li><a href="provider.html" target="mainFrame"><img src="images/btn_suppliers.gif"/></a>
    </li>
    <li><a href="user.html" target="mainFrame"><img src="images/btn_users.gif"/></a></li>
    <li id="quit-btn"><a><img src="images/btn_exit.gif"/></a></li>
    </li>
  </ul>
</div>
<div id="modify-section" style="overflow: hidden;display: none;">
  <div class="main">
    <div class="optitle clearfix">
      <div class="title">供应商管理&gt;&gt;</div>
    </div>
    <form id="modify-form" name="form1" method="post" action="">
      <div class="content">
        <input id="flag" type="hidden">
        <input name="id" type="hidden">
        <table class="box">
          <tbody>
          <tr>
            <td class="field">供应商名称：</td>
            <td><input name="name" value="" class="text" type="text"> <font color="red">*</font>
            </td>
          </tr>
          <tr>
            <td class="field">供应商描述：</td>
            <td><textarea name="desc" cols="45" rows="5"></textarea></td>
          </tr>
          <tr>
            <td class="field">供应商电话：</td>
            <td><input name="phone" value="" class="text" type="text"></td>
          </tr>
          <tr>
            <td class="field">联系人：</td>
            <td><input name="contactPerson" value="" class="text" type="text"></td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="buttons">
        <input id="submit-btn" name="button" value="提交" class="input-button" type="submit">
        <input id="back-btn" name="button" value="返回" class="input-button" type="button">
      </div>
    </form>
  </div>
</div>
<div id="list-section" style="overflow: hidden">
  <div class="menu">
    <table>
      <tbody>
      <tr>
        <td>
          <form id="search-form" method="post">
            供应商名称：
            <input name="name" class="input-text" type="text"> &nbsp;&nbsp;&nbsp;&nbsp;
            供应商描述：
            <input name="desc" class="input-text" type="text">&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="search-form-btn">组 合 查 询</button>
          </form>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="main">
    <div class="optitle clearfix">
      <em><input id="add-btn" value="添加数据" class="input-button" type="button"></em>
      <div class="title">供应商管理&gt;&gt;</div>
    </div>

    <div class="content">
      <table class="list">
        <tbody id="list-body">
        <tr>
          <td width="70" height="29">
            <div align="center">编号</div>
          </td>
          <td width="80">
            <div align="center">供应商名称</div>
          </td>
          <td width="100">
            <div align="center">供应商描述</div>
          </td>
          <td width="100">
            <div align="center">联系人</div>
          </td>

          <td width="100">
            <div align="center">电话</div>
          </td>
          <td width="100">
            <div align="center">操作</div>
          </td>
        </tr>
        <tr id="list-form-title" style="display: none">
          <td>
            <div class="id" align="center">编号</div>
          </td>
          <td>
            <div class="name" align="center">供应商名称</div>
          </td>
          <td>
            <div class="desc" align="center">供应商描述</div>
          </td>
          <td>
            <div class="contactPerson" align="center">联系人</div>
          </td>
          <td>
            <div class="phone" align="center">电话</div>
          </td>
          <td>
            <div class="operation" align="center">
              <a href="" class="update">修改</a>
              <a href="" class="delete">删除</a>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/common.js"></script>
<script>
  $(function () {

    var MODULE = "provider";
    bindFormAddSwitch();
    bindFormBackSwitch();
    getCurrentUser();
    refreshList(MODULE);

    $("#list-body").on("click", ".update", function (e) {
      e.preventDefault();
      let id = $(this).parents("tr").find(".id").text();
      fillProviderModifyForm(id);
    })

    $("#list-body").on("click", ".delete", function (e) {
      e.preventDefault();
      let id = $(this).parents("tr").find(".id").text();
      postDeleteRow(MODULE, id);
    })

    /**
     * 组合查询
     */
    $("#search-form-btn").click(function (e) {
      e.preventDefault();
      refreshList(MODULE);
    });

    $("#submit-btn").click(function (e) {
      e.preventDefault();
      let flag = $(this).parents("form").find("#flag").val();
      postModifyForm(MODULE, flag)
    });
  });

  function fillProviderModifyForm(id) {
    $.ajax({
      type: "post",
      contentType: "application/json;charset=UTF-8",
      url: "server/provider/get",
      data: JSON.stringify({"id": id}),
      success: function (result) {
        if (!$.isEmptyObject(result)) {
          result = result.data;
          $("#flag").val("update");
          let lineNode = $("#modify-section");
          for (let prop in result) {
            lineNode.find("[name='" + prop + "']").val(result[prop]);
          }

          $("#modify-section").show();
          $("#list-section").hide();
        } else {
          alert("id不存在");
        }
      }
    });
  }

</script>
</body>
</html>